<!--
  @author:  long
  @date:    2024/5/29
  @file:    xx
  @require:
-->
<template>
  <div class="editProjectInfo app-container">
    <el-row :gutter="20">
      <el-col :span="15">
        <el-form
          :rules="rules"
          style="padding: 0 10px"
          label-position="top"
          label-width="auto"
          :model="projectForm"
          ref="projectFormRef"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="所属" required>
                <el-input v-model="projectForm.userName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="项目名称" required prop="name">
                <el-input
                  v-model="projectForm.name"
                  maxlength="255"
                  placeholder="输入项目名称"
                  show-word-limit
                  type="text"
                >
                  <template #prefix>
                    <div
                      class="flex items-center justify-center pr-5px border-r-1"
                      style="border-right: 1px solid #eee; padding-right: 5px"
                    >
                      <img
                        :src="projectIcon"
                        style="width: 16px; height: 16px"
                      />
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="项目标识" required prop="identification">
                <el-input
                  v-model="projectForm.identification"
                  maxlength="15"
                  placeholder="大写字母和数字，15个字符以内"
                  show-word-limit
                  type="text"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="可见范围" required>
                <div class="rangeSelect">
                  <div class="range-title">
                    <el-icon color="#999" size="18">
                      <Unlock />
                    </el-icon>
                    <div class="range-title-content">公开</div>
                  </div>
                  <div class="range-description">
                    组织全部成员可见，仅加入的项目成员可编辑
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述">
                <el-input
                  v-model="projectForm.description"
                  :rows="3"
                  show-word-limit
                  maxlength="2000"
                  type="textarea"
                  placeholder="输入项目描述"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button
                  type="primary"
                  class="w100px pt12px"
                  @click="submitForm('projectFormRef')"
                  >确定
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="9">
        <div class="flex items-center justify-between mb-10px">
          <span>成员</span>
          <el-button type="primary" link icon="Plus" @click="handleAddUser"
            >添加成员
          </el-button>
        </div>
        <el-table :data="projectUserList">
          <el-table-column label="姓名" prop="label"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 人员弹出框下拉框 -->
    <SelectDialog
      :dialog-param="dialogParam"
      @ok="selectDialogData"
      @close="
        val => {
          dialogParam.isDialog = false
        }
      "
    />
  </div>
</template>

<script setup name="EditProjectInfo">
import scrumFill from '@/assets/icons/svg/scrumFill.svg'
import kanbanSquareFill from '@/assets/icons/svg/kanbanSquareFill.svg'
import ganttSquareFill from '@/assets/icons/svg/ganttSquareFill.svg'
import { getCurrentInstance } from 'vue'
import useResearchProjectStore from '@/store/modules/researchProject'
import { saveRepaymentProject } from '@/api/researchManage/projectManage'
import useUserStore from '@/store/modules/user'
// 当前用户信息
const userStore = useUserStore()

const { proxy } = getCurrentInstance()
const projectFormRef = ref(null)
// 项目类型图标
const projectIcon = ref(scrumFill)
// 新建项目的表单
const projectForm = ref({
  username: '',
  name: '',
  identification: '',
  description: ''
})
const researchProjectStore = useResearchProjectStore()

onMounted(() => {
  researchProjectStore.getProjectInfo(proxy.$route.query.projectId)
})

watch(
  () => researchProjectStore.projectInfo,
  (newVal, oldVal) => {
    console.info('newVal', newVal)
    console.info('oldVal', oldVal)

    projectForm.value = JSON.parse(JSON.stringify(newVal))
    projectUserIds.value = projectForm.value.memberIdArr.map(id => {
      return 'U' + id
    })
    projectUserList.value = projectForm.value.membersArr.map((item, index) => {
      return {
        label: item,
        uuid: projectForm.value.memberIdArr[index],
        id: projectForm.value.memberIdArr[index]
      }
    })
  }
)

const dialogParam = ref({})
// 项目成员列表
const projectUserList = ref([])
// 项目成员id
const projectUserIds = ref([])

// 表单验证规则
const rules = ref({
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  identification: [
    { required: true, message: '请输入项目标识', trigger: 'blur' },
    //正则校验 英文字母/数字/下划线/连接线（不超过15字符）
    {
      pattern: /^[a-zA-Z0-9_-]{1,15}$/,
      message: '英文字母/数字/下划线/连接线',
      trigger: 'blur'
    }
  ]
})

//添加项目成员
const handleAddUser = () => {
  dialogParam.value.type = 'projectIdArr'
  dialogParam.value.title = '请选择销售人员'
  dialogParam.value.isDialog = true
  dialogParam.value.multiple = true
  dialogParam.value.nodeKey = 'uuid'
  dialogParam.value.defaultCheckedKeys = projectUserIds.value
  dialogParam.value.dataType = 'person'
}

// 人员选择确定
const selectDialogData = val => {
  switch (val.type) {
    case 'projectIdArr':
      projectUserList.value = val.selectData
      projectUserIds.value = val.defaultCheckedKeys
      console.info('projectUserList.value', projectUserList.value)
      console.info(' projectUserIds.value', projectUserIds.value)
      break
  }
}

// 保存
const submitForm = formRef => {
  //表单校验
  projectFormRef.value.validate(valid => {
    if (valid) {
      if (projectUserList.value.length == 0) {
        proxy.$modal.msgWarning('请选择项目成员')
        return
      }
      let obj = projectUserList.value.find(item => {
        return item.id == projectForm.value.userId
      })
      if (!obj) {
        proxy.$modal.msgWarning('项目成员必须包含项目归属人')
        return
      }

      //触发保存接口
      let params = {
        id: projectForm.value.id,
        type: projectForm.value.type,
        userName: projectForm.value.userName,
        userId: projectForm.value.userId,
        name: projectForm.value.name,
        identification: projectForm.value.identification,
        description: projectForm.value.description,
        memberIdArr: projectUserList.value.map(item => {
          return item.id
        }),
        membersArr: projectUserList.value.map(item => {
          return item.label
        })
      }
      saveRepaymentProject(params).then(res => {
        //     修改成功
        proxy.$modal.msgSuccess('修改成功')
        researchProjectStore.getProjectInfo(projectForm.value.id)
      })
    } else {
      console.log('校验失败')
      return false
    }
  })
}
</script>

<style scoped lang="scss">
.editProjectInfo {
}

//   可见范围
.rangeSelect {
  width: 100%;
  padding: 10px 20px;
  color: #333;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #dcdfe6;
  border-radius: 0.25rem;

  .range-title {
    @apply flex items-center;
    .range-title-content {
      @apply flex items-center text-lg pt-2px pl-5px;
    }
  }

  .range-description {
    color: #aaa;
    font-size: 12px;
    line-height: 20px;
    padding-left: 25px;
  }
}

.rangeSelect:hover {
  border-color: #c0c4cc;
}
</style>
